<template>
  <div class="alloc-resource">
    <el-card v-for="category in categoryList" :key="category.id" shadow="false">
      <div slot="header" class="clearfix cart-header">
        <el-checkbox
          :indeterminate="!category.selected"
          v-model="category.selected"
          @change="handleCheckAllChange(category)"
          >{{ category.name }}</el-checkbox
        >
      </div>

      <div>
        <el-checkbox
          class="resource-item"
          v-for="child in category.children"
          v-model="child.selected"
          :key="child.id"
          @change="handleCheckCurrent(child)"
          >{{ child.name }}</el-checkbox
        >
      </div>
    </el-card>
    <el-card class="btn-group">
      <el-button type="primary" @click="submit">保存</el-button>
      <el-button @click="reset">清空</el-button>
    </el-card>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import { getRoleResources, allocateRoleResources } from '@/apis/resource'
interface resourceType {
  name: string;
  id: number;
  selected: boolean;
  categoryId: number;
}
interface CategoryListType {
  name: string;
  id: number;
  children: resourceType[];
  selected: boolean;
}
export default Vue.extend({
  name: 'alloc-resource',
  props: {
    roleId: {
      type: [Number, String]
    }
  },
  data() {
    return {
      categoryList: [] as CategoryListType[]
    }
  },
  created() {
    this.loadResourceList()
  },
  methods: {
    async loadResourceList() {
      const { data } = await getRoleResources(this.roleId)
      if (data.code === '000000') {
        const categoryList: CategoryListType[] = data.data.map((res: any) => {
          const resource = {
            id: res.id,
            name: res.name,
            selected: res.selected,
            children:
              (res.resourceList &&
                res.resourceList.map((item: any) => {
                  return {
                    id: item.id,
                    name: item.name,
                    selected: item.selected,
                    categoryId: item.categoryId
                  }
                })) ||
              []
          }
          return resource
        })
        console.log(categoryList)
        this.categoryList = categoryList
      }
    },
    handleCheckAllChange(category: CategoryListType) {
      category.children.forEach((child) => {
        child.selected = category.selected
      })
    },
    handleCheckCurrent(data: resourceType) {
      const category = this.categoryList.find(
        (category) => category.id === data.categoryId
      ) as CategoryListType
      category.selected = category.children.every((child) => child.selected)
    },
    async submit() {
      const resourceIdList: number[] = []
      this.categoryList.forEach((category) => {
        category.children.forEach((child) => {
          child.selected && resourceIdList.push(child.id)
        })
      })
      const { data } = await allocateRoleResources({
        roleId: this.roleId,
        resourceIdList
      })
      if (data.code === '000000') {
        this.$message.success('分配角色资源成功')
      }
    },
    reset() {
      this.categoryList.forEach((category) => {
        category.selected = false
        category.children.forEach((child) => {
          child.selected = false
        })
      })
    }
  }
})
</script>
<style lang="scss" scoped>
.alloc-resource {
  .el-card {
    border-radius: 0;
  }
  .cart-header {
    background-color: rgb(242, 246, 252);
    padding: 20px;
  }
  .resource-item {
    padding: 20px;
    min-width: 25%;
  }
  .btn-group {
    display: flex;
    justify-content: center;
  }
}
</style>
